<template>
  <view class="list">
    <view class="search">
      <search-bar
        :curr-value="form.name"
        type="team"
        @search="search"
      />
      <my-tablist
        :category-list="categoryList"
        default-tab="全部"
        @change="changeTab"
      />
      <view class="line" />
      <sort-menu
        ref="sortmenu"
        show-distance
        @sort="sort"
        @citySearch="citySearch"
      />
    </view>
    <ul class="card">
      <li
        v-for="item in list"
        :key="item.id"
        @click="$jumpUrl(`/productPages/team/productDetail?id=${item.goodsId}`)"
      >
        <view class="card_left">
          <image
            :src="item.logoImage"
            class="img"
            mode="aspectFill"
          />
        </view>
        <view class="card_right">
          <view class="title-flex">
            <view class="title title-line-clamp">
              {{ item.name }}
            </view>
            <view
              v-if="item.distance"
              class="distance"
            >
              {{ item.distance }}km
            </view>
          </view>
          <view class="flex">
            <view
              v-for="(tag, index) in item.tagList"
              :key="index"
              class="tagList"
            >
              <view class="item">
                {{ tag.name }}
              </view>
            </view>
          </view>
          <view class="flex detail-bottom">
            <view
              v-show="item.price"
              class="start-price"
            >
              {{ item.price }}
							<span style="font-size: 20rpx;">/{{detail.salesUnit || '人'}}</span>
            </view>
            <view class="font-11">
              <span
                class="color-999"
                style="margin-left: 10px"
              >销量: {{ item.sellNumber }}</span>
            </view>
          </view>
        </view>
      </li>
      <view
        v-if="!list.length"
        class="noResult"
      >
        未匹配到结果，请重新搜索！
      </view>
    </ul>
  </view>
</template>

<script>
import searchBar from '@/components/search-bar/index.vue';
import sortMenu from '@/components/sort-menu/index.vue';
import myTablist from '@/components/my-tablist/index.vue';
// import { getDistance } from '@/common/js/util.js';

export default {
  components: {
    searchBar,
    myTablist,
    sortMenu
  },
  data() {
    return {
      travelShow: false,
      tripShow: false,
      list: [],
      page: {
        page_size: 10,
        current_page: 1,
        count: 0,
        loading: false,
        finished: false,
      },
      form: {
        name: '',
        city: '',
        // priceSort: 0,
        // number: 1,
        // day: 1
      },
      filter: {distanceTag:1},
      categoryList: [],
      category: '',
      cateId: '',
      defaultCode: '',
      currLocation: []
    };
  },
  onLoad(e) {
    // this.category = e.category;
    // this.defaultCode = e.category;
    this.form.name = e.name;
    this.form.city = e.city;
    console.log('页面传递的参数', e);
    if (e.cateId) {
      this.cateId = e.cateId;
      this.getCategoryList(e.cateId);
    } else {
      this.queryData();
    }
    if (e.title) {
      uni.setNavigationBarTitle({
        title: e.title,
      });
    }
  },
  // 页面下拉刷新
  onPullDownRefresh() {
    this.list = [];
    this.page.current_page = 1;
    this.queryData('refresh');
  },
  // 页面触底
  onReachBottom() {
    if (this.list.length < this.page.count) {
      this.queryData();
    }
  },
  methods: {
    search(e) {
      console.log('搜索团建列表页', e);
      this.form.name = e.inputValue;
      this.form.city = '';
      this.$refs.sortmenu.reset();
      this.filter = {distanceTag:1};
      this.list = [];
      this.page.current_page = 1;
      this.queryData();
    },
    sort(e) {
      console.log('sort e', e);
      const { type, val } = e;
      if(val) {
        const obj = {
          distanceTag: 1,
          priceTag: 1,
          sellNumTag: 1
        };
        this.filter = {};
        this.filter[type] = obj[type];
      } else {
        this.filter = {};
        this.filter[type] = 2;
      }
      this.list = [];
      this.page.current_page = 1;
      this.queryData();
    },
    citySearch(e) {
      console.log('cityChange', e);
      this.form.city = e;
      this.list = [];
      this.page.current_page = 1;
      this.queryData();
    },
    // 列表获取
    queryData(status) {
      uni.showLoading({
        title: '加载中',
      	mask:true
      });
      this.page.loading = true;
      const location = this.$store.state.storeLocation || [];
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/goods/search',
        data: {
          codeList: this.category,
          keywords: this.form.name,
          // address: this.form.city,
          destCity: this.form.city,
          type: 'BUILD',
          nowLat: location[0] || '',
          nowLng: location[1] || '',
          ...this.filter,
          ...this.page,
        },
      }).then((res) => {
        res.data.forEach((item) => {
          if (item.tag) {
            item.tagList = JSON.parse(item.tag);
          } else {
            item.tagList = [];
          }
          // if(this.currLocation.length) {
          //   const dis = getDistance(...this.currLocation, item.lat, item.lng) ;
          //   item.distance = dis.toFixed(2);
          // }
        });
        this.list.push.apply(this.list, res.data);
        this.page.count = res.count;
        this.page.loading = false;
        if (this.list.length >= this.page.count) {
          this.page.finished = true;
        }
        this.page.current_page += 1;
				uni.hideLoading()
        if (status === 'refresh') {
          uni.stopPullDownRefresh();
        }
      }).catch(() => {
        uni.hideLoading();
      });
    },
    changeTab(item) {
      console.log('changeTab', item);
      this.list = [];
      this.page.current_page = 1;
      if (item.code) {
        this.category = item.code;
      } else {
        this.category = this.defaultCode;
      }
      this.queryData();
    },
    getCategoryList(id) {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/product/ioc/queryCategoryListById',
        data: {
          id,
        },
      }).then((res) => {
        if (res.data) {
          this.categoryList = res.data;
          if(res.data && res.data.length) {
            const val = res.data.map(e => e.code);
            // console.log('cateList', val, String(val), val.join(','));
            this.defaultCode = String(val);
            this.category = String(val);
          }
          this.queryData();
        }
      });
    },
    // computeDistance() {
    //   dd.getLocation({
		// 			type: 0,
		// 			success: (res) => {
		// 				const { longitude, latitude } = res;
    //         this.currLocation = [latitude, longitude];
		// 			},
		// 			fail(e) {
		// 				if (e && e.error === 11) {
		// 					uni.showToast({
		// 						title: '请开启定位权限'
		// 					});
		// 				} else {
		// 					uni.showToast({
		// 						title: e.errorMessage
		// 					});
		// 				}
		// 			},
		// 		});
    // }
  },
};
</script>

<style lang="less" scoped>
.list {
  min-height: 100vh;
  background: #f7f9fb;

  .search {
    background: #fff;
    padding: 30rpx 30rpx 0;
    position: relative;
    margin-bottom: 30rpx;

    .line {
      border-top: 1rpx solid rgba(0, 0, 0, 0.1);
      position: absolute;
      width: 100vw;
      left: 0;
    }
  }

  .card {
    overflow: hidden;
    // background: #f7f9fb;

    .noResult {
      padding: 118upx 0;
      text-align: center;
    }

    .card_left {
      margin-right: 20rpx;
    }

    .card_right {
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 42rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .title-flex {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }

    .distance {
      font-size: 22rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 30rpx;
    }

    li {
      padding: 20rpx;
      margin: 0 20rpx 20rpx;
      display: flex;
      background: #fff;
      border-radius: 10rpx;

      .img {
        width: 180upx;
        height: 180upx;
        border-radius: 10upx;
        overflow: hidden;
      }

      h1 {
        font-size: 32upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 40upx;
        margin: 24upx 0 14upx 0;
      }

      .title {
        line-height: 40upx;
      }

      .tagList {
        overflow: hidden;
        margin: 14upx 0;

        .item {
          display: inline-block;
          margin: 0 10upx 10upx 0;
          padding: 0 14upx;
          background: #fef2e7;
          border-radius: 4upx;
          font-size: 20upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #fe7d15;
        }
      }

      .flex {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
      }

      .detail-bottom {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
      }

      .start-price {
        &:after {
          color: #ff4d00;
          // content: '/人';
        }
      }
    }
  }
}
</style>
